<template>
  <div id="all">
    <nav-header></nav-header>
    <div class="article">
      <div class="art-left">
        <div class="art-header">
          <div class="art-top">
            <div class="art-title">{{ article.articleTitle }}</div>
            <div class="art-stars" v-for="item in stars" :key="item">
              <img src="../assets/imgs/hb.png" alt />
            </div>
          </div>
          <div class="art-date">{{ article.createTime }}</div>
        </div>
        <div class="art-content">
          <div class="art-html" v-html="Html"></div>
          <div class="TagCtn">
            <div
              class="articleTag TagModule"
              @click="tagDetail(article.interest, article.articleInterestId)"
            >
              #{{ article.interest }}
            </div>
            <div class="talkCtn" v-if="article.talk">
              <div
                class="articleTag"
                v-for="(item, index) in article.talkList"
                :key="index"
                @click="favorDetail(item)"
              >
                #{{ item }}
              </div>
            </div>
          </div>
        </div>

        <div class="art-btns">
          <div class="btns">
            <div
              class="btn-single"
              @click="getFavor(article.articleId, article.articleUserid)"
            >
              <div class="coffee">
                <img
                  src="../assets/imgs/artdz.png"
                  alt
                  v-if="article.isPoint == 0"
                />
                <img src="../assets/imgs/arthz.png" v-else />
              </div>
              <div class="btn-text">{{ article.pointCount }}</div>
            </div>
            <div class="btn-single">
              <div class="btn-icon">
                <img src="../assets/imgs/ahf.png" alt />
              </div>
              <div class="btn-text">{{ res.count }}</div>
            </div>
            <div class="btn-single" @click="forwardBtn(article.articleId)">
              <div class="report">
                <img src="../assets/imgs/azf.png" alt />
              </div>
              <div class="btn-text">{{ article.forwardCount }}</div>
            </div>
            <div
              class="btn-single btnCollect"
              @click="collect(article.articleId)"
            >
              <div class="btn-icon" v-if="article.isCollect == 0">
                <img src="../assets/imgs/shoucang.png" alt />
              </div>
              <div class="btn-icon" v-else>
                <img src="../assets/imgs/yishoucang.png" alt />
              </div>
              <div class="btn-text">{{ collectText }}</div>
            </div>
            <div
              class="reportBtn artReport"
              @click="showReport(article.articleId)"
            >
              <div class="reportIcon">
                <img src="../assets/imgs/jubaoIcon.png" alt />
              </div>
              <span class="reportText">举报</span>
            </div>
          </div>
        </div>
        <div class="gift-Detail" v-if="isGift">
          <div
            class="user-gfit"
            v-if="artDetail.jcount != 0 || artDetail.ycount != 0"
          >
            <div class="user-ygb" v-if="artDetail.jcount != 0">
              <div class="headImg-ygb">
                <div
                  class="userImage"
                  v-for="(item, index) in artDetail.jlist"
                  :key="index"
                  :style="{ 'z-index': 10 - index, left: 0.2 * index + `rem` }"
                >
                  <img :src="item.sendRewardHeadImage" mode="aspectFit" />
                </div>
                <div class="userImage more" v-if="artDetail.jlist.length >= 2">
                  <img src="../assets/imgs/more.png" alt="" />
                </div>
              </div>
              <div class="giftDetal" v-if="artDetail.jlist.length >= 2">
                <div class="gift-nickname">
                  已获得加速币
                  <span class="gitNums">{{ artDetail.jcount }}</span
                  >个,{{ artDetail.jlist[0].sendRewardNickName }}*{{
                    artDetail.jlist[0].rewardNumber
                  }}、{{ artDetail.jlist[1].sendRewardNickName }}*{{
                    artDetail.jlist[1].rewardNumber
                  }}等用户投喂~
                </div>
              </div>
              <div class="giftDetal" v-else>
                <div class="gift-nickname">
                  已获得加速币
                  <span class="gitNums">{{ artDetail.jcount }}</span
                  >个,{{ artDetail.jlist[0].sendRewardNickName }}*{{
                    artDetail.jlist[0].rewardNumber
                  }}投喂~
                </div>
              </div>
            </div>
            <div class="user-ygb gift-ygb" v-if="artDetail.ycount != 0">
              <div class="headImg-ygb">
                <div
                  class="userImage"
                  v-for="(item, index) in artDetail.ylist"
                  :key="index"
                  :style="{ 'z-index': 10 - index, left: 0.2 * index + `rem` }"
                >
                  <img :src="item.sendRewardHeadImage" />
                </div>
                <div class="userImage more" v-if="artDetail.ylist.length >= 2">
                  <img src="../assets/imgs/more.png" alt="" />
                </div>
              </div>
              <div class="giftDetal" v-if="artDetail.ylist.length >= 2">
                <div class="gift-nickname">
                  已获得荧光棒
                  <span class="gitNums ygbType">{{ artDetail.ycount }}</span
                  >个,{{ artDetail.ylist[0].sendRewardNickName }}*{{
                    artDetail.ylist[0].rewardNumber
                  }}、{{ artDetail.ylist[1].sendRewardNickName }}*{{
                    artDetail.ylist[1].rewardNumber
                  }}等用户投喂~
                </div>
              </div>
              <div class="giftDetal" v-else>
                <div class="gift-nickname">
                  已获得荧光棒
                  <span class="gitNums ygbType">{{ artDetail.ycount }}</span
                  >个,{{ artDetail.ylist[0].sendRewardNickName }}*{{
                    artDetail.ylist[0].rewardNumber
                  }}投喂~
                </div>
              </div>
            </div>
          </div>
          <!-- 礼物区域 -->
          <div class="art-gifts">
            <div class="gift" @click="reward('speed')">
              <div class="gift-icon">
                <img src="../assets/imgs/speed.png" alt />
              </div>
              <div class="gift-text">投加速币</div>
            </div>
            <div class="gift" @click="reward('ying')">
              <div class="gift-icon" id="ygb">
                <img src="../assets/imgs/yinggb.png" alt />
              </div>
              <div class="gift-text">送荧光棒</div>
            </div>
          </div>
        </div>
        <!-- 评论区域 -->
        <div class="talk">
          <div class="talk-top">
            <textarea
              class="send-talk"
              placeholder="最多可以评论140字···"
              v-model="content"
              maxlength="140"
              @keyup.enter="sendTalk"
            ></textarea>
            <div class="talk-btn" @click="sendTalk">评论</div>
          </div>
          <div class="talk-content" v-if="res.listShow">
            <div class="comment-num">评论 {{ res.count }}</div>
            <div
              class="talk-single"
              v-for="(item, index) in commentList"
              :key="index"
            >
              <div class="talk-header">
                <div class="talk-img" @click="goUp('home', item.sendCommentId)">
                  <img :src="item.sendCommentHeadImage" alt />
                </div>
                <div class="talk-right">
                  <div class="talk-name">{{ item.sendCommentNickName }}</div>
                  <div class="talk-date">{{ item.createTime }}</div>
                </div>
              </div>
              <div class="typeOne" v-if="item.hidden">
                <div class="content-type onlyComment com-content">
                  <span class="commentCtn">{{ item.commentContent }}</span>
                  <div class="icon" @click="showIpt(item.commentId)">
                    <img src="../assets/imgs/huifu.png" alt />
                  </div>
                </div>
                <div v-if="item.isIpt">
                  <input
                    class="replybtn"
                    placeholder="最多可以回复140字···"
                    v-model="replyContent"
                    maxlength="140"
                  />
                  <div
                    class="reply-btn"
                    @click="
                      replyTalk(
                        item.commentArticleId,
                        item.commentContent,
                        item.sendCommentId
                      )
                    "
                  >
                    回复
                  </div>
                  <div
                    v-if="isDelete"
                    class="reply-btn delete"
                    @click="deleteTalk(article.articleId, item.commentId)"
                  >
                    删除
                  </div>
                </div>
              </div>
              <div class="typeTwo" v-else>
                <div class="content-type">
                  <div class="reply">
                    <div class="reply-name">{{ item.getCommentNickName }}:</div>
                    <div class="replyCtn">{{ item.getReplyContent }}</div>
                  </div>
                  <div class="com-content replyType">
                    <span class="commentCtn">{{ item.commentContent }}</span>
                    <div class="icon" @click="showIpt(item.commentId)">
                      <img src="../assets/imgs/huifu.png" alt />
                    </div>
                  </div>
                  <div v-if="item.isIpt">
                    <input
                      class="replybtn"
                      placeholder="最多可以回复140字···"
                      v-model="replyContent"
                      maxlength="140"
                    />
                    <div
                      class="reply-btn"
                      @click="
                        replyTalk(
                          item.commentArticleId,
                          item.commentContent,
                          item.sendCommentId
                        )
                      "
                    >
                      回复
                    </div>
                    <div
                      v-if="isDelete"
                      class="reply-btn delete"
                      @click="deleteTalk(article.articleId, item.commentId)"
                    >
                      删除
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="talk-content noneList" v-else>亲亲暂时没有内容哦~</div>
        </div>

        <div class="paging" v-if="res.count > 20">
          <el-pagination
            layout="prev, pager, next"
            :total="res.count"
            :page-size="20"
            :background="true"
            :pager-count="7"
            @current-change="changePage"
          ></el-pagination>
        </div>
      </div>
      <div class="art-right">
        <div class="header" @click="goUp('home', user.userId)">
          <div class="header-id-img">
          <img :src="user.headImage" alt />
          </div>
          <div class="id-Icon" v-if="user.identity == 1">
            <img src="../assets/imgs/xhv.png" alt="" />
          </div>
          <div class="id-Icon" v-if="user.identity == 2">
            <img src="../assets/imgs/xlv.png" alt="" />
          </div>
          <div class="id-Icon" v-if="user.identity == 3">
            <img src="../assets/imgs/green.png" alt="" />
          </div>
        </div>
        <div class="name">{{ user.nickName }}</div>
        <div class="introduce">{{ user.introduce }}</div>
        <div class="tag">
          <div class="single-tag" @click="goUpfans(user.userId, 0)">
            <div class="single-num">{{ user.followCount }}</div>
            <div class="single-type">关注</div>
          </div>
          <div class="single-tag" @click="goUpfans(user.userId, 1)">
            <div class="single-num">{{ user.fansCount }}</div>
            <div class="single-type">粉丝</div>
          </div>
          <div class="single-tag" id="favor">
            <div class="single-num">{{ user.pointCount }}</div>
            <div class="single-type">获赞</div>
          </div>
        </div>
        <div
          class="concern-btn"
          v-if="user.isFollow == 0"
          @click="concern(user.userId)"
        >
          关注
        </div>
        <div class="concern-btn disable" v-else @click="concern(user.userId)">
          已关注
        </div>
      </div>
    </div>
    <Report ref="report" :reportId="reportId"></Report>

    <ForwardModal
      ref="forward"
      :listId="listId"
      @countAdd="countAdd"
    ></ForwardModal>
    <Modal :giftType="modalType" :artObj="sonObj" ref="modal"></Modal>
    <nav-footer ref="child"></nav-footer>
  </div>
</template>

<script>
import NavHeader from "../components/Header";
import NavFooter from "../components/Footer";
import Modal from "../components/GiftModal";
import ForwardModal from "../components/ForwardModal";
import Copy from "../components/Copy";
import Report from "../components/Report";
export default {
  data() {
    return {
      stars: [],
      minHeight: 0,
      article: "",
      user: "",
      content: "",
      commentList: "",
      isIpt: false,
      res: "",
      replyContent: "",
      modalType: "",
      artObj: {},
      listId: 0,
      sonObj: {},
      collectText: "收藏",
      reportId: 0,
      currentPage: 1,
      isDelete: false,
      isGift: false,
      artDetail: {},
      Html: "",
    };
  },
  created() {
    let id = this.$route.query.id;
    this.init(id);
  },
  mounted() {
    this.getRem(1920, 100);
  },
  components: {
    NavHeader,
    Modal,
    NavFooter,
    Copy,
    ForwardModal,
    Report,
  },
  methods: {
    //主函数
    init(id) {
      //获取文章详情
      this.$post(`/laiwen/article/frontend/info/${id}`, {}).then((res) => {
        console.log(res);
        this.artDetail = res;
        this.isGift = true;
        this.article = res.article;
        let ctn = res.article.articleHtml;
        this.Html = ctn.replace(
          /\<img/gi,
          '<img style="max-width:100%;height:auto"'
        );
        if (this.article.articlePicture) {
          this.article.pic = this.article.articlePicture
            .split(",")
            .filter((e) => {
              return e;
            });
        }
        if (this.article.talk) {
          this.article.talkList = this.article.talk.split(",").filter((e) => {
            return e;
          });
        }

        //判断收藏与取消收藏的显示
        this.article.isCollect === 1
          ? (this.collectText = "取消收藏")
          : (this.collectText = "收藏");

        //展示星星
        this.stars.length = res.article.award + 1;
        //评论列表
        this.loadCommentData(1);

        //查up信息
        this.$fetch(
          `/laiwen/user/frontend/otheruser?userId=${res.article.articleUserid}`,
          {}
        ).then((response) => {
          console.log(response);
          this.user = response.user;
        });
      });
      //获取up主信息
    },
    showReport(id) {
      this.reportId = id;
      this.$refs.report.clear();
    },
    //打赏礼物
    reward(type) {
      if (!this.tourist()) {
        return true;
      }
      this.modalType = type;
      this.$refs.modal.showModal();
      this.artObj.getRewardHeadImage = this.article.headImage;
      this.artObj.getRewardNickName = this.article.nickName;
      this.artObj.articleId = this.article.articleId;
      this.artObj.getRewardId = this.article.articleUserid;
      this.sonObj = this.artObj;
    },
    //展示输入模态窗
    showIpt(id) {
      if (!this.tourist()) {
        return true;
      }
      let res = [...this.commentList].find((item) => item.commentId == id);
      res.isIpt = !res.isIpt;
      //控制删除按钮
      let userId = JSON.parse(localStorage.getItem("user")).id;
      if (this.article.articleUserid == userId || res.sendCommentId == userId) {
        this.isDelete = true;
      } else {
        this.isDelete = false;
      }
    },
    //点赞方法
    getFavor(articleId, userId) {
      let that = this;
      let favor = {};
      that.$set(favor, "articleId", articleId);
      that.$set(favor, "getPointId", userId);
      that.$post("/laiwen/point/frontend/save", favor).then((res) => {
        if (that.article.isPoint == 0) {
          this.$message.success("点赞成功");
          that.article.isPoint = 1;
          that.article.pointCount += 1;
        } else {
          this.$message("取消点赞");
          that.article.isPoint = 0;
          that.article.pointCount -= 1;
        }
      });
    },
    //发送评论
    sendTalk() {
      if (!this.tourist()) {
        return true;
      }
      if (this.content.trim() === "") {
        this.$message.error("评论内容不能为空");
        return false;
      }
      let that = this;
      let comment = {};
      this.$set(comment, "commentContent", this.content);
      this.$set(comment, "getCommentId", this.article.articleUserid);
      this.$set(comment, "commentArticleId", this.article.articleId);
      that.$post(`/laiwen/comment/frontend/save`, comment).then((res) => {
        console.log(res);
        this.content = "";
        that.article.commentCount += 1;
        //评论列表
        that.loadCommentData(1);
      });
    },
    //发送回复
    replyTalk(id, commentCtn, sendCommentId) {
      let that = this;
      if (!that.replyContent.trim()) {
        this.$message.warning(`请输入内容`);
        return false;
      }
      let obj = {};
      that.$set(obj, "commentArticleId", id);
      that.$set(obj, "commentContent", that.replyContent);
      that.$set(obj, "getReplyContent", commentCtn);
      that.$set(obj, "getReplyUserId", sendCommentId);
      that.$post(`/laiwen/comment/frontend/reply`, obj).then((res) => {
        //回复成功
        that.loadCommentData(1);
        that.replyContent = "";
      });
    },
    //删除评论
    deleteTalk(articleId, commentId) {
      this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        //如果原文章作者需要两个参数
        //如果原评论作者需要一个cmtid参数
        let userId = JSON.parse(localStorage.getItem("user")).id;
        if (this.article.articleUserid == userId) {
          this.deleteServe(articleId, commentId);
        } else {
          this.deleteServe("", commentId);
        }
      });
    },
    deleteServe(articleId, commentId) {
      this.$fetch(
        `/laiwen/comment/frontend/delete?articleId=${articleId}&commentId=${commentId}`
      ).then((res) => {
        //删除成功后重新加载列表
        if (res.code == 0) {
          this.loadCommentData(this.currentPage);
        }
      });
    },
    //触发转发模态窗
    forwardBtn(e) {
      this.listId = e;
      this.$refs.forward.showModal();
    },
    countAdd() {
      this.article.forwardCount += 1;
    },
    forwardPage() {},
    //专题详情
    tagDetail(name, id) {
      if (!this.tourist()) {
        return true;
      }
      this.$router.push({
        path: "/tag",
        query: { name: `${name}`, id: `${id}` },
      });
    },
    //标签详情
    favorDetail(name) {
      if (!this.tourist()) {
        return true;
      }
      this.$router.push({
        path: "/favorTag",
        query: { name: `${name}` },
      });
    },
    //进入到up关注,粉丝
    goUpfans(id, index) {
      this.$router.push({
        path: "/fans",
        query: { id: `${id}`, index: `${index}` },
      });
    },
    //关注操作
    concern(id) {
      let that = this;
      if (!this.tourist()) {
        return true;
      }
      //处理自己关注自己
      if (!that.isConcern(id)) {
        return false;
      }

      that
        .$post(`/laiwen/follow/frontend/save?getFollowId=${id}`, {})
        .then((res) => {
          if (that.user.isFollow == 0) {
            that.user.isFollow = 1;
            that.user.fansCount += 1;
          } else {
            that.user.isFollow = 0;
            that.user.fansCount -= 1;
          }
        });
    },
    //消息页
    goComment(path, id) {
      if (!this.tourist()) {
        return true;
      }
      console.log(this.commentList);
    },
    //uphome
    goUp(path, id) {
      this.navigate(path, id);
    },
    //收藏
    collect(id) {
      let collect = {};
      let res = this.article;
      this.$set(collect, "getCollectId", res.articleUserid);
      this.$set(collect, "collectPostId", id);
      this.$post(`/laiwen/collect/frontend/save`, collect).then((val) => {
        if (res.isCollect == 0) {
          res.isCollect = 1;
          this.collectText = "取消收藏";
          this.$message.success("收藏成功");
        } else {
          res.isCollect = 0;
          this.collectText = "收藏";
          this.$message("取消收藏");
        }
      });
      console.log(collect);
    },
    //初始化评论列表
    loadCommentData(page) {
      let that = this;
      that
        .$post(
          `/laiwen/comment/frontend/list?articleId=${that.article.articleId}&page=${page}&limit=20`,
          {}
        )
        .then((res) => {
          console.log(res);
          that.commentList = res.commentList;
          that.res = res;
          // //判断无评论的样式
          that.delList(res, "commentList");
          console.log(that.commentList);
          //判断评论和回复的样式
          for (let i of that.commentList.keys()) {
            that.$set(that.commentList[i], "hidden", false);
            //回复输入框展示
            this.$set(that.commentList[i], "isIpt", false);
            if (that.commentList[i].getReplyContent == null) {
              that.commentList[i].hidden = true;
            }
          }
        });
    },
    //分页方法
    changePage(size) {
      this.currentPage = size;
      this.loadCommentData(size);
    },
  },
  //路由离开时执行
  beforeRouteLeave(to, from, next) {
    //目标为详情页时开启keep-alive
    to.meta.isBack = true;
    next();
  },
};
</script>

<style scoped src="../assets/css/artDetail.css"></style>
